<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>列表排序</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 遍历数组 -->
             <input type="text" placeholder="请输入名字" v-model="keyWord" />
             <button @click="sortType=2">年龄升序</button>
             <button @click="sortType=1">年龄降序</button>
             <button @click="sortType=0">原顺序</button>
            <ul>
                <li v-for="(p,index) in filterPersonsArr" :key="index">
                    {{p.name}} - {{p.age}} - {{p.sex}}
                </li>
            </ul>

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            
            new Vue({
                el:'#root', 
                data:{ 
                    personsArr:[
                        {id:'001',name:'马冬梅',age:18,sex:'女'},
                        {id:'002',name:'周冬雨',age:16,sex:'女'},
                        {id:'003',name:'周杰伦',age:25,sex:'男'},
                        {id:'004',name:'温兆伦',age:21,sex:'男'}
                    ],
                    keyWord:'', // 接收用户输入值
                    sortType:0, //0 正常顺序 1 降序 2 升序
                },


                computed:{
                    //只需要get，使用简写形式
                    filterPersonsArr(){
                        //还要确定要不要排序，先不返回
                        const arr = this.personsArr.filter((p)=>{
                            return p.name.indexOf(this.keyWord) !== -1
                        })
                        if(this.sortType){ //0为false 1和2都是true
                            arr.sort((p1,p2)=>{
                                return this.sortType == 1 ? p2.age-p1.age : p1.age - p2.age
                            })
                        }
                        //最后再返回arr
                        return arr
                    }
                }

            })

            const arrs = [1,3,2,5,6,8,4]
            arrs.sort((a,b)=>{
                return a-b // 前-后 升序  后-前 降序
            })
            console.log(arrs)
        </script>

        
    </body>
</html>